<template>
    <div class="mapC">
        <div class="left">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="路线" name="first">
                    <div class="box">
                        <h3>公交</h3>
                        <p>先从北门开始，直走123分钟，
                            美术馆还将产生多大的影响?目前我们还不得而知。
                            但通过网络继续进行知识与审美的传播和分享,在这</p>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="驾车" name="second">
                    <div class="box">路线2</div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="right">
            <div id="container"></div>
        </div>
    </div>
</template>

<style scoped>
.mapC {
    display: flex;
}
.left {
    width: 25%;
    text-align: center;
    box-sizing: border-box;
    padding: 1rem;
    font-size: 16px;
    color: white;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    background-color: #1049a9;
}
.right {
    width: 75%;
    background-color: #67C23A;
    position: relative;
}
#container {
    width: 100%;
    height: 100%;
}
</style>

<script>
export default {
    data(){
        return {
            activeName: 'first'
        }
    },
    methods:{
        createMap(){
           try {
                var map = new AMap.Map('container', {
                    pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
                    viewMode:'3D' // 地图模式
                });
                map.setZoomAndCenter(19, [103.7315360000,29.5596960000]); //同时设置地图层级与中心点
                // map.plugin('AMap.Geolocation', function () {
                // let geolocation = new AMap.Geolocation({
                //         enableHighAccuracy: true,//是否使用高精度定位，默认:true
                //         timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                //         maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                //         convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                //         showButton: true,        //显示定位按钮，默认：true
                //         buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                //         buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                //         showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                //         showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                //         panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                //         zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                //     });
                //     map.addControl(geolocation);
                //     geolocation.getCurrentPosition();
                //     // AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                //     // AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                // });
           } catch (error) {
               console.log(error)
           }
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    mounted(){
        this.createMap()

    }
}
</script>